<template>
  <div id="boothLayoutManagement">
    <el-row v-if="isConstruct">
      <el-col :span="18">
        <div class="booth-layout_container" ref="layoutContainer">
          <div v-for="(item, index) in gridQuantity" :index="index" :style="gridBoxStyle" class="grid-box">
            <el-tooltip v-if="stallsMap[index]" placement="top" effect="light">
              <div slot="content">
                <div class="tooltip-box">
                  {{stallsMap[index].stalls_name}}<br/>
                  <el-button type="text" @click="deleteStall(index)">删除摊位</el-button>
                  <el-button type="text" @click="editStall(index)">编辑摊位</el-button>
                </div>
              </div>
              <div class="icon-box icon-active">
                <i class="fa fa-check" aria-hidden="true"></i>
              </div>
            </el-tooltip>
            <div v-else class="icon-box" @click="activeGrid($event, index)">
            </div>
          </div>
        </div>
      </el-col>
      <el-col :span="4" :offset="2">
        <div class="instruction">
          <p>选择说明：</p>
          <div class="instruction-item">
            <div class="icon-item"></div>
            未使用摊位
          </div>
          <div class="instruction-item">
            <div class="icon-item icon-active">
              <i class="fa fa-check" aria-hidden="true"></i>
            </div>
            可使用摊位
          </div>
        </div>
      </el-col>
    </el-row>

    <el-dialog title="编辑摊位" size="tiny" :visible.sync="isEditStall">
      <el-form :model="stallData" :rules="stallFormRule" ref="stallData" label-position="left">
        <el-form-item label="摊位名称" label-width="120px" prop="stalls_name" required>
          <el-input v-model="stallData.stalls_name" size="small" placeholder="请输入摊位名称" style="width:100%"></el-input>
        </el-form-item>
        <el-form-item label="摊位地址" label-width="120px" prop="stalls_url" required>
          <el-input v-model="stallData.stalls_url" size="small" placeholder="请输入摊位地址" style="width:100%"></el-input>
        </el-form-item>
        <el-form-item style="text-align:center">
          <el-button type="primary" style="width: 40%" @click="saveStallData('stallData')">提交</el-button>
          <el-button style="width: 40%" @click="Cancel('stallData')">取消</el-button>
        </el-form-item>
        <el-form-item style="text-align:center">
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
  import { postDataToServer } from '../../assets/js/post.js'

  export default {
    name: 'boothLayoutManagement',
    data () {
      return {
        gridX: 10,
        gridY: 10,
        gridQuantity: 0,
        gridBoxStyle: {
          width: '',
        },
        stallData: {
          stalls_name: '',
          stalls_url: '',
          coordinate_x: 0,
          coordinate_y: 0
        },
        stallFormRule: {
          stalls_name: [
            {required: true, message: '摊位名称不能为空', trigger: 'blur'}
          ],
          stalls_url: [
            {required: true, message: '摊位地址不能为空', trigger: 'blur'}
          ]
        },
        stallList: [],
        stallsMap: {},
        isConstruct: false,
        isEditStall: false
      }
    },
    created () {
      this.gridQuantity = this.gridX * this.gridY
      this.createComponent()
    },
    mounted () {
      this.gridBoxStyle.width = (1 / this.gridX) * 100 + '%'
    },
    methods: {
      createComponent () {
        this.getStallsDataList()
      },
      //向服务器获取摊位列表
      getStallsDataList () {
        let _this = this
        postDataToServer('STALLS_NET_LISTALL').then((data) => {
          if (data.status === 0) {
            _this.stallList = data.data_list
          }
        }).then(() => {
          _this.constructStallsData()
        })
      },
      constructStallsData () {
        let _index = 0
        let _this = this
        this.stallsMap = {}
        this.stallList.map(function (item, index) {
          _index = item.coordinate_y * _this.gridX + item.coordinate_x
          _this.stallsMap[_index] = item
        })
        this.isConstruct = true
      },
      //修改摊位场地规格
      setCoordinateAmount (x, y) {
        this.gridX = x
        this.gridY = y
      },
      activeGrid (event, index) {
        this.isConstruct = false
        if (event.currentTarget.className === 'icon-box') {
          this.addStall(index)
        } else {
          this.deleteStall(index)
          event.currentTarget.className = 'icon-box'
        }
        this.isConstruct = true
        this.addStall(index)
      },
      deleteStall (item) {
        this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          let _item = this.stallsMap[item]
          let parame = new Object()
          parame.id = _item.id
          postDataToServer('STALLS_NET_DEL', parame).then((data) => {
            if (data.status === 0) {
              this.$message.success('删除成功')
              this.createComponent()
            } else {
              this.$message({
                type: 'error',
                message: data.message
              })
            }
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })

      },
      editStall (index) {
        this.stallData = this.stallsMap[index]
        this.isEditStall = true
      },
      addStall (index) {
        let c_y = parseInt(index / (this.gridX))
        let c_x = index % this.gridX
        this.stallData = {
          coordinate_x: c_x,
          coordinate_y: c_y,
          stalls_name: ''
        }
        this.isEditStall = true
      },
      saveStallData (formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.saveDataToService()
          } else {
            this.$message({
              type: 'error',
              message: '数据格式出错'
            })
            return false
          }
        })
      },
      saveDataToService () {
        let _this = this
        let option = this.stallData.id ? 'STALLS_NET_EDIT' : 'STALLS_NET_ADD'
        postDataToServer(option, this.stallData)
          .then((data) => {
            if (data.status === 0) {
              _this.isEditStall = false
              _this.createComponent()
            } else {
              this.$message.error(data.message)
            }
          })
      },
      Cancel (formName) {
        this.$refs[formName].resetFields()
        this.isEditStall = false
      }
    }
  }
</script>

<style scoped>
  #boothLayoutManagement {
    padding: 1em 10em;
    color: #bfcbd9;
  }

  .booth-layout_container {
    font-size: 0;
    width: 100%;
    text-align: center;
    /*border: 1px solid #bfcbd9;*/
  }

  .grid-box {
    display: inline-block;
    font-size: 12px;
    position: relative;
    vertical-align: middle;

  }

  .grid-box:before {
    content: "";
    display: inline-block;
    padding-bottom: 100%;
    width: .1px;
    vertical-align: middle;
  }

  .grid-box:hover {
    cursor: pointer;
  }

  .grid-box .icon-box {
    display: inline-block;
    vertical-align: middle;
    position: relative;
    font-size: 2em;
    width: 90%;
    height: 90%;
    border: 1px solid #bfcbd9;
    border-radius: 5px;
  }

  .grid-box .icon-box:before {
    content: "";
    display: inline-block;
    padding-bottom: 100%;
    width: .1px;
    vertical-align: middle;
  }

  .icon-active {
    background: #13ce66;
    color: white;
  }

  /*说明样式*/
  .instruction {
    margin-top: 5em;
  }

  .instruction-item {
    width: 100%;
    float: left;
    text-align: center;
    line-height: 25px;
    margin: 1em;
  }

  .icon-item {
    width: 35px;
    height: 31px;
    float: left;
    border: 1px solid #bfcbd9;
    border-radius: 5px;
  }
</style>
